<template>
    <view>
        <view class="bannerbox">
            <image class="bannerimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17284365649861095.png" mode="widthFix"></image>
            <view class="acttitle" @click="rulebtn">活动规则</view>
            <view v-if="isShow" class="acttitle2" @click="Winners">获奖名单</view>
        </view>
		
        <view class="navbox">
            <view class="navtitle" v-for="(item, index) in navlist" :key="index" :class="{ 'text4': navindex == index }"
            @click="navswitch(index)">
            {{ item }}
            <view v-if="navindex == index" class="aft4"></view>
            </view>
        </view>
        <view v-if="dynamicList.length > 0">
					<view class="list wap" v-for="(item, index) in dynamicList" :key="index">
						<view class="userbox" @click="nav_to('/pages/user/user_visitor?id='+item.UserID)">
							<image class="userimg" :src="item.HeadImgUrl" mode="aspectFill"></image>
							<view class="middbox">
								<view class="name">{{ item.Name?$util.entitiesToUtf16(item.Name):'' }}</view>
								<view class="daybox">
									<text class="Birthday" v-if="item.Birthday">{{ getYearStr(item.Birthday) }}后</text>
									<!-- <text class="city" v-if="resData.City">{{ resData.City }}</text> -->
								</view>
							</view>
							<view class="time">
								{{ getTime(item.CreateTime) }}
							</view>
						</view>
						<view class="content">
							{{ $util.entitiesToUtf16(item.Content) }}
						</view>
						<view class="mt20" @click.stop="'';" v-if="item.IsVideo === 0">
							<view class="one" @click.stop="lookimg(item.Images)" v-if="JSON.parse(item.Images).length == 1">
								<image
									class="simg"
									:src="JSON.parse(item.Images)[0] + '?x-oss-process=image/resize,m_fill,w_1500'"
									mode="widthFix"
									@click.stop="lookimg(item.Images, 0)"
								/>
							</view>
							<view class="two" @click.stop="lookimg(item.Images)" v-else-if="JSON.parse(item.Images).length == 2">
								<view class="two-one" @click.stop="lookimg(item.Images, 0)">
									<image class="simg" :src="JSON.parse(item.Images)[0] + '?x-oss-process=image/resize,m_fill,w_1500'" mode="aspectFill" />
								</view>
								<view class="two-two">
									<image
										class="simg"
										:src="JSON.parse(item.Images)[1] + '?x-oss-process=image/resize,m_fill,w_1500'"
										mode="aspectFill"
										@click.stop="lookimg(item.Images, 1)"
									/>
								</view>
							</view>
							<view class="three" @click.stop="lookimg(item.Images)" v-else-if="JSON.parse(item.Images).length == 3">
								<view class="three-one" @click.stop="lookimg(item.Images, 0)">
									<image class="simg" :src="JSON.parse(item.Images)[0] + '?x-oss-process=image/resize,m_fill,w_1500'" mode="aspectFill" />
								</view>
								<view class="three-two">
									<image
										class="simg"
										:src="JSON.parse(item.Images)[1] + '?x-oss-process=image/resize,m_fill,w_1500'"
										mode="aspectFill"
										@click.stop="lookimg(item.Images, 1)"
									/>
									<image
										class="simg"
										:src="JSON.parse(item.Images)[2] + '?x-oss-process=image/resize,m_fill,w_1500'"
										mode="aspectFill"
										@click.stop="lookimg(item.Images, 2)"
									/>
								</view>
							</view>
							<view class="four" @click.stop="lookimg(item.Images)" v-else-if="JSON.parse(item.Images).length == 4">
								<view class="four-one">
									<view class="four-one-one" @click.stop="lookimg(item.Images, 0)">
										<image class="simg" :src="JSON.parse(item.Images)[0] + '?x-oss-process=image/resize,m_fill,w_1500'" mode="aspectFill" />
									</view>
									<view class="four-one-two" @click.stop="lookimg(item.Images, 1)">
										<image class="simg" :src="JSON.parse(item.Images)[1] + '?x-oss-process=image/resize,m_fill,w_1500'" mode="aspectFill" />
									</view>
								</view>
								<view class="four-two">
									<view class="four-two-one" @click.stop="lookimg(item.Images, 2)">
										<image class="simg" :src="JSON.parse(item.Images)[2] + '?x-oss-process=image/resize,m_fill,w_1500'" mode="aspectFill" />
									</view>
									<view class="four-two-two" @click.stop="lookimg(item.Images, 3)">
										<image class="simg" :src="JSON.parse(item.Images)[3] + '?x-oss-process=image/resize,m_fill,w_1500'" mode="aspectFill" />
									</view>
								</view>
							</view>
							<view class="five" v-else>
								<view class="five-one" v-for="(imgs, index) in JSON.parse(item.Images)" :key="index">
									<image @click.stop="lookimg(item.Images, index)" :src="imgs + '?x-oss-process=image/resize,m_fill,w_1500'" mode="aspectFill" />
								</view>
							</view>
						</view>
						<view class="video_box" v-else @click.stop="">
							<video :id="'video'+index" :src="JSON.parse(item.Images)[0]" :poster="JSON.parse(item.Images)[0] + '?x-oss-process=video/snapshot,t_1,m_fast,ar_auto'" @play="videoPlay(index)"></video>
						</view>
						<view class="ft_btn">
							<view class="citybottom">
								{{ itme.City || '' }}
							</view>
							<view class="buttonbox">
								<image class="icon_pad" :src="ossPath + '/upload/17114181667231118.png'" v-if="item.IsMyZAN == 0" @click="zan(item)"></image>
								<image class="icon_pad" :src="ossPath + '/upload/1711419377332251.png'" v-else></image>
								<view class="f3 c3">{{ item.CommunityZAN.length }}</view>
								<image class="icon_pad" :src="ossPath + '/upload/17116215041881268.png'" v-if="item.IsSendGift == 0" @click="open_gift(item)"></image>
								<image class="icon_pad" :src="ossPath + '/upload/17116215041881268.png'" v-else @click="open_gift(item)"></image>
								<view class="f3 c3">{{ item.TotalGiftNum }}</view>
								<image class="icon_pad" :src="ossPath + '/upload/17114182173691488.png'" @click="tocommit(item.ID, 0)"></image>
								<view class="f3 c3" v-if="item.CommunityComments.length>0">{{ item.CommunityComments.length }}</view>
								<view class="icon_pad2" v-if="user.UserID == item.UserID">
									<uni-icons type="trash" size="25" color="#9b9b9b" @click="del(item.ID)"></uni-icons>
								</view>
								
								<!-- #ifdef MP-WEIXIN -->
								<!-- <button hover-class="none" open-type="share" :data-id="item.ID">
									<image :src="ossPath + '/upload/1717484310589825.png'"></image>
								</button> -->
								<image class="icon_pad" :src="ossPath + '/upload/1717484310589825.png'" @click="openshar(item.ID)"></image>
								<!-- #endif -->
								<!-- #ifdef APP-PLUS -->
								<button hover-class="none" @click="app_share(item)">
									<image :src="ossPath + '/upload/1717484310589825.png'"></image>
								</button>
								<!-- #endif -->
							</view>
						</view>
						<view v-if="item.CommunityComments.length > 0" class="Commbox">
							<view class="msgbox" v-for="(value, c_index) in item.CommunityComments" :key="c_index">
								<view class="comment" @click="comment_edit(index, c_index)" v-if="value.ReplyID > 0">
									<text>{{ value.Name?$util.entitiesToUtf16(value.Name):'' }} 回复 {{ value.Pre_Name ?$util.entitiesToUtf16(value.Pre_Name):'' }}:</text>
									{{ value.Content?$util.entitiesToUtf16(value.Content):'' }}
								</view>
								<view class="comment" @click="comment_edit(index, c_index)" v-else>
									<text>{{ value.Name?$util.entitiesToUtf16(value.Name):''}}:</text>
									{{ value.Content?$util.entitiesToUtf16(value.Content):'' }}
								</view>
							</view>
						</view>
					</view>
                    <view style="height:250rpx;"></view>
		</view>
        <view class="empty" v-else>
            <u-empty mode="list" width="64" height="64" :icon="ossPath + '/upload/17124806786111367.png'" :show="true" iconSize="32" text="暂无动态"></u-empty>
        </view>

        
        <view class="bottombtnbox">
            <view class="bottombtn" @click="nav_to('/pages/dynamic/dynamic_add')">
                <image class="cameila" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17237083076421446.png"></image>
                <view class="catitle">立即参与</view>
            </view>
        </view>
        <!-- 赠送礼物弹出层 -->
		<uni-popup ref="gift" type="center">
			<view class="x-popup">
				<view class="popup-title">
					赠送对方礼物
					<view class="xiaoju-popup-close" @click="$refs['gift'].close()">关闭</view>
				</view>
				<scroll-view class="popup-wrap" scroll-y="true" :show-crollbar="true" scroll-with-animation="true">
					<view class="x-list">
						<view v-for="(l, i) in gift" :key="i" @click="gift_active = i" class="list-cell" :class="{ 'list-active': i == gift_active }">
							<image class="list-icon" :src="l.Icon ? l.Icon : '/static/img/icon_bbt.png'" mode=""></image>
							<view v-if="i != gift_active" class="list-name">{{ l.Name }}</view>
							<view class="list-price">￥{{ l.Price }}</view>
							<view v-if="i == gift_active" class="list-btn">
								<view class="add" @click="gift_num_reduce(l)">-</view>
								<view class="count">
									{{ l.Num }}
								</view>
								<view class="add" @click="gift_num_plus(l)">+</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="popup-btn" @click="giftEvent()">赠送</view>
			</view>
		</uni-popup>
        <!-- 活动规则 -->
        <uni-popup ref="rule" type="center">
			<image class="ruleimg" :src="action_list[0]?action_list[0].Description:'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17276795053801223.png'" @click="ruleclose"></image>
			<!-- <view class="rulebox">
                <view class="ruletite2">活动规则说明</view>
                <view class="ruletitle">一、活动全称</view>
                <view class="ruletext">雪遇8月滑雪照片投票活动</view>
                <view class="ruletitle">二、活动时间</view>
                <view class="ruletext">活动截止时间：2024年9月15日</view>
                <view class="ruletitle">二、参与方式</view>
                <view class="ruletext">注册雪遇账号，在动态发布一张滑雪照片，带上8月滑雪照片话题，发布成功即可</view>
                <view class="ruletitle">三、活动奖励</view>
                <view class="ruletext3">动态按站内点赞数排序</view>
                <view class="ruletext3">第一名<text class="ruletext2">3000现金</text>+价值<text class="ruletext2">2000VIP年卡</text></view>
                <view class="ruletext3">第2—10名<text class="ruletext2">500现金</text>+价值<text class="ruletext2">2000VIP年卡</text></view>
                <view class="ruletext">选中照片会得到专题推广机会和制作成精美相册寄到获奖者手上</view>
                <view class="closebtn" @click="ruleclose">知道了</view>
			</view> -->
		</uni-popup>
        <inputBox :commit="commit2" @submit="submit"></inputBox>

		<uni-popup ref="share" type="bottom">
			<view class="x-share">
				<view class="item">
					<!-- <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/icon/wx_logo.png"></image> -->
					<button hover-class="none" open-type="share" :data-id="Dynamic">
						<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/172765876400472.png"></image>
					</button>
					<span>转发好友</span>
				</view>
				<view class="item" @click="sharePYQ()">
					<image style="margin-bottom: 44rpx;" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17276587480201161.png"></image>
					<span>保存到相册</span>
				</view>
			</view>
		</uni-popup>
    </view>
</template>

<script>
import inputBox from './components/input-box.vue';
export default {
components: {
    inputBox,
},
data() {
return {
	Dynamic:'',//某一条的活动id
	isShow:false,
    navlist: ['最新动态', '人气排行'],
    navindex:0,
    dynamicList:[],
    PageIndex:1,
    PageSize:10,
    dynamicLength:0,
    ossPath:'',
    zan_id:'', // 点赞id
    cache_user:{}, // 自己的信息
    sel_community:{},
    gift: [], //礼物数组
	gift_active: -1, //当前选中礼物
    commit2: false,
    review_id: 0,
	comment_id: 0,
	actionID:'', // 活动id
	action_list:[],
	user:{},
};
},
onLoad(e){
	this.showBtn()
	this.actionID = e.id
    this.ossPath = this.$ossPath;
    this.cache_user = uni.getStorageSync('user');
    this.user = uni.getStorageSync('user');
	this.getSubjectList()
    this.GetGift()
	this.getActions()
},
onShow(){
},
onShareAppMessage(e) {
		//发送给朋友
		// let trendsIndex = e.target.dataset.trendsIndex;
		console.log('==========');
		console.log(e);
		if (e.target) {
			let trendsId = e.target.dataset.id; //有id是分享单独的动态
			let trendtype = e.target.dataset.type; //有type是分享这个页面
			if (trendsId > 0) {
				let o = this.dynamicList.find((item) => item.ID == trendsId);
				let pid = uni.getStorageSync('user').UserID;
				this.shareTitle = '雪遇精彩瞬间，您不容错过';
				this.sharePath = 'pages/album/activity?pid=' + pid + '&id=' + this.actionID;
				this.shareImg = o.IsVideo == 1 ? JSON.parse(o.Images)[0] + '?x-oss-process=video/snapshot,t_1,m_fast,ar_auto' : JSON.parse(o.Images)[0];
				return {
					title: this.shareTitle,
					path: this.sharePath,
					imageUrl: this.shareImg
				};
			}
		} else {
			let id = this.cache_user.UserID;
			let Name = this.$util.entitiesToUtf16(this.cache_user.Name);
			if (this.resData.Sex == '女') {
				return {
					title: `${Name}给你推荐了一位雪遇美女`,
					path: `/pages/album/activity?pid=${id}&id=${this.actionID}`,
					imageUrl: this.resData.UserImgs
				};
			} else {
				return {
					title: `${Name}给你推荐了一位雪遇高手`,
					path: `/pages/album/activity?pid=${id}&id=${this.actionID}`,
					imageUrl: this.resData.UserImgs
				};
			}
		}	
},
//下拉刷新
  onPullDownRefresh(){
    this.dynamicList = []
	this.PageIndex = 1
	this.getSubjectList()
    uni.stopPullDownRefresh()
  },
onReachBottom() {
	this.PageIndex++
    this.getSubjectList()
},
methods: {
	sharePYQ(){
		this.nav_to('/pages/album/transcript?id='+this.Dynamic)
		this.$refs.share.close()
	},
	openshar(id){
		this.Dynamic = id
		this.$refs.share.open()
	},
	//是否显示获奖名单按钮
	showBtn(){
		let nowtime = new Date()
		let month = nowtime.getMonth() + 1;
		let day = nowtime.getDate();
		if(month >= 10 && day >= 25){
			this.isShow = true
		}
	},
	//视频播放
    videoPlay(index){
      let video = uni.createVideoContext("video"+index,this)
      // video.play();
      for (let i = 0; i < this.dynamicList.length; i++) {
        if(i !=index){
          let video2 = uni.createVideoContext("video"+i,this)
          video2.pause()
        }
        
      }
    },
	lookimg(url, index) {
		let arr = JSON.parse(url);
		uni.previewImage({
			urls: arr,
			current: index,
		})
	},
	//删除
	async del(ID) {
		let _this = this;
		let index = this.dynamicList.findIndex((item) => item.ID === ID)
		uni.showModal({
			title: '温馨提示',
			content: '您确定要删除这条动态吗?',
			confirmText: "删除",
			success: async function(res) {
				if (res.confirm) {
					let res1 = await _this.$api.post('/Community/Delete', {
						ID: ID
					});
					if(res1.code == 0){
						_this.dynamicList.splice(index, 1)
						_this.$pv.msg('删除成功');
					}else{
						_this.$pv.msg('删除失败');
					}
					
				} else if (res.cancel) {

				}
			}
		});
	},
	async getActions() {
		let res = await this.$api.post('Action/Running');
		if(res.code == 0){
			this.action_list = res.data;
		}
		
	},
    //列表切换
    navswitch(index) {
      this.navindex = index
	  this.dynamicList = []
	  this.PageIndex = 1
      if (index == 0) {
		this.getSubjectList(0)
      } else if (index == 1) {
        this.getSubjectList(1)
      } 
    },
    ruleclose(){
        this.$refs['rule'].close();
    },
    rulebtn(){
        this.$refs['rule'].open();
    },
	Winners(){
		this.nav_to('/pages/album/win_list?id='+this.actionID)
	},
    async submit(val) {
			if (val != '') {
				// console.log(val);
				let utf16 = this.$util.utf16ToEntities(val).slice(0,200);
				let res = await this.$api.post('/Community/UserComment', {
					CommunityID: this.review_id,
					Content: utf16,
					CompanyID: 6002,
					ReplyID: this.comment_id
				});
				console.log(JSON.parse(res.data));
				if (JSON.stringify(res.data) == 'true') {
					this.dynamicList.forEach((item, index) => {
						if (item.ID == this.review_id) {
							item.CommunityComments.push({
								UserID: uni.getStorageSync('user').UserID,
								HeadImgUrl: uni.getStorageSync('user').HeadImgUrl,
								Name: uni.getStorageSync('user').Name,
								Content: val,
								CreateTime: new Date(),
								ReplyID: this.comment_id
							});
							this.dynamicList.splice(index, 1, item);
						}
					});

					this.commit2 = !this.commit2;
				}
			} else {
				this.$pv.msg('评论不能为空');
			}
		},
    //回复消息
		comment_edit(index, c_index) {
			let _this = this;
			const user = uni.getStorageSync('user');

			const item = this.dynamicList[index].CommunityComments[c_index];

			if (user.ID == item.UserID) {
				uni.showActionSheet({
					itemList: ['删除评论'],
					success: function (res) {
						if (res.tapIndex == 0) {
							_this.delReview(index, c_index);

							return;
						}
					},
					fail: function (res) {}
				});
			} else {
				//直接回复
				this.tocommit(item.CommunityID, item.ID);
			}
		},
		// 评论
		tocommit(ID, C_ID) {
			console.log('1111');
			// console.log(id);
			this.commit2 = !this.commit2;
			console.log(this.commit2);
			this.review_id = ID;
			this.comment_id = C_ID;

			console.log('评论ID', this.review_id, this.comment_id);
		},
        async delReview(index, c_index) {
			const item = this.dynamicList[index].CommunityComments[c_index];

			let res = await this.$api.post('/Community/DeletePage', {
				ID: item.ID
			});
			this.$pv.msg('删除成功');

			this.dynamicList[index].CommunityComments.splice(c_index, 1);
		},
    // 赠送礼物的相关逻辑
		async giftEvent() {
			// 当前选中礼物
			const l = this.gift[this.gift_active];
			const gift_s_price = l.Price;
			const gift_price = l.Price * l.Num;
			const MessageId = Math.random().toString().substr(2, 10);
			let res_gift = await this.$api.post('Friend/SendGift', {
				Price: gift_price,
				GiftID: l.ID,
				GiftName: l.Name,
				GiftQty: l.Num,
				ToUserID: this.sel_community.UserID,
				EventID: this.sel_community.ID,
				SendType: '球友圈赠送',
				MessageId: MessageId
			});
			// 支付请求
			let pres = await this.$api.post('Payment/PayV2', {
				total_fee: gift_price,
				EventType: '赠送礼物',
				EventID: JSON.stringify(res_gift.data),
				body: l.Name,
				SourcePage: 'user_visitor',
				// #ifdef MP-WEIXIN
				PayChannel: 'weixin',
				// #endif
				// #ifdef APP
				PayChannel: 'app'
				// #endif
			});
			// 已余额支付成功
			if (pres.data == 0) {
				// 提示赠送成功
				this.$pv.msg('礼物赠送成功');
				// 关闭礼物弹出层
				this.$refs['gift'].close();

				this.dynamicList.forEach((item, index) => {
					if (item.ID == this.sel_community.ID) {
						item.IsSendGift = 1;
						item.TotalGiftNum = item.TotalGiftNum + l.Num;
						this.dynamicList.splice(index, 1, item);
					}
				});

				//组装消息实体
				const n_msg = {
					Price: gift_price,
					Name: l.Name,
					OutMessageId: MessageId,
					Done: 0,
					Icon: l.Icon
				};

				// 自定义对话内容(自定义消息,JSON(消息),id,判断条件)
				this.$im.sendMessage(200, JSON.stringify(n_msg), this.sel_community.UserID + '', 12).then((res) => {
					console.log(JSON.stringify(n_msg));
				});

				return;
			}

			// 支付成功返回的内容
			let payObj = JSON.parse(pres.data);

			console.log(JSON.stringify(payObj));

			let _this = this;
			// 调用uni支付API
			uni.requestPayment({
				// 服务提供商
				provider: 'wxpay',
				// #ifdef APP
				orderInfo: payObj,
				// #endif
				// #ifdef MP-WEIXIN
				timeStamp: payObj.timeStamp,
				nonceStr: payObj.nonceStr,
				package: payObj.package,
				signType: payObj.signType,
				paySign: payObj.paySign,
				// #endif
				success(res) {
					// _this.$pv.msg('等待对方同意');
					// 关闭礼物弹出层
					_this.$refs['gift'].close();

					_this.$pv.msg('礼物赠送成功');

					_this.dynamicList.forEach((item, index) => {
						if (item.ID == _this.sel_community.ID) {
							item.IsSendGift = 1;
							item.TotalGiftNum = item.TotalGiftNum + l.Num;
							_this.dynamicList.splice(index, 1, item);
						}
					});

					//组装消息实体
					const n_msg = {
						Price: gift_price,
						Name: l.Name,
						OutMessageId: MessageId,
						Done: 0,
						Icon: l.Icon
					};
					// 自定义对话内容(自定义消息,JSON(消息),id,判断条件)
					_this.$im.sendMessage(200, JSON.stringify(n_msg), _this.sel_community.UserID + '', 12).then((res) => {
						console.log(JSON.stringify(n_msg));
					});
				},
				fail(err) {
					console.log(err);
					_this.$pv.msg('支付失败');
				}
			});
		},
    //礼数数减
		gift_num_reduce(l) {
			if (l.Num >= 1) {
				l.Num--;
			}
		},
		//礼物数加
		gift_num_plus(l) {
			if (l.Num >= 0) {
				l.Num++;
			}
		},
    // 获取礼物列表
		async GetGift() {
			let res = await this.$api.post('Friend/GetGift');
			this.gift = res.data || [];
		},
    //礼物
    open_gift(item) {
		this.sel_community = item;
		this.$refs['gift'].open();
	},
    // 赞
		async zan(item) {
			this.zan_id = item.ID;
			let _this = this
			if(_this.user.IsAuth == 0){
					uni.showModal({
						title: '温馨提示',
						content: '您还没注册，请先注册',
						confirmText: '确定',
						success: function(rs) {
							if (rs.confirm) {
									_this.nav_to('/pages/start/start2')
									return
							} else if (rs.cancel) {

							}
						}
					});
					return
				}
			let res = await this.$api.post('Community/ZAN', {
				ID: item.ID
			});

			if (JSON.stringify(res.data) == 'true') {
				this.$pv.msg('点赞成功');

				this.dynamicList.forEach((item, index) => {
					if (item.ID == this.zan_id) {
						item.IsMyZAN = 1;
						item.CommunityZAN.push({
							UserID: this.cache_user.UserID,
							HeadImgUrl: this.cache_user.HeadImgUrl
						});
						this.dynamicList.splice(index, 1, item);
					}
				});
			} else {
				this.$pv.msg(res.message);
			}
		},
        async getSubjectList(e=0) {
			let res = await this.$api.post('Community/Subject', {
				ActionID: this.actionID?this.actionID:'1',
				PageIndex: this.PageIndex,
				PageSize: this.PageSize,
				Sort: e
			});
			// console.log('==============222',res);
			if(res.code == 0){
				if(this.PageIndex == 1){
					this.dynamicList = res.data
				}else{
					let l = this.dynamicList.concat(res.data);
					this.dynamicList = this.clearRepetition(l, 'ID');
				}
			}
		},
        // 去重,后面的覆盖前面的
		clearRepetition(arr, key = 'id') {
			let newArr = [];
			arr.forEach((item) => {
				let index;
				let check = newArr.every((newItem, i) => {
					if (item[key] !== newItem[key]) {
						index = -1;
						return true;
					} else {
						index = i;

						return false;
					}
				});
				if (check) {
					newArr.push(item);
				} else {
					newArr.splice(index, 1, item);
				}
			});
			return newArr;
		},
},

}
</script>
<style lang='scss'>
button::after {
	border: none;
}
.bottombtnbox{
    width: 100%;
    height: 200rpx;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    .bottombtn{ 
        width: 670rpx;
        height: 92rpx;
        background: #0D0D0D;
        border-radius: 44rpx;
        margin: 0 auto;
        margin-top: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        .cameila{
            width: 48rpx;
            height: 48rpx;
        }
        .catitle{
            font-size: 32rpx;
            font-weight: bold;
            color: #fff;
            margin-left: 8rpx;
        }
    }
}
.navbox {
  // width: 704rpx;
  width: 100%;
  height: 116rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 0 auto;
//   margin-top: 20rpx;
  background-color: #fefefe;
//   border-bottom: 1rpx solid #E4E4E4;

  .navtitle {
    width: calc(100% / 3);
    height: 100%;
    color: #999999;
    font-size: 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .text4 {
    color: #333333;
    font-size: 32rpx;
    font-weight: bold;
  }

  .aft4 {
    width: 40rpx;
    height: 8rpx;
    background: #3D72DA;
    border-radius: 4rpx;
    position: absolute;
    bottom: 24rpx;
    left: 50%;
    transform: translateX(-50%);
  }
}
.ruleimg{
	width: 600rpx;
	height: 986rpx;
}
.rulebox{
    width: 600rpx;
    height: 874rpx;
    background: #FFFFFF;
    border-radius: 32rpx;
    border: 4rpx solid #FFFFFF;
    padding: 32rpx 48rpx;
    box-sizing: border-box;
    .ruletite2{
        font-size: 36rpx;
        font-weight: bold;
        color: #0D0D0D;
        text-align: center;
    }
    .ruletitle{
        font-size: 28rpx;
        font-weight: bold;
        color: #0D0D0D;
        margin-bottom: 8rpx;
    }
    .ruletext{
        font-size: 28rpx;
        color: #333333;
        margin-bottom: 24rpx;
    }
    .ruletext3{
        font-size: 28rpx;
        color: #333333;
        margin-bottom: 8rpx;
    }
    .ruletext2{
        font-size: 28rpx;
        color: #3D72DA;
    }
    .closebtn{
        width: 510rpx;
        height: 96rpx;
        background: #0D0D0D;
        border-radius: 48rpx;
        font-size: 32rpx;
        font-weight: bold;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 48rpx;
    }
}
.bannerbox{
    position: relative;
    .acttitle{
        position: absolute;
        right: 0;
        top: 24rpx;
        width: 144rpx;
        height: 48rpx;
        background: #FFFFFF;
        border-radius: 200rpx 0rpx 0rpx 200rpx;
        font-size: 24rpx;
        color: #17447E;
        display: flex;
        justify-content: center;
        align-items: center;
    }
	.acttitle2{
        position: absolute;
        right: 0;
        top: 84rpx;
        width: 144rpx;
        height: 48rpx;
        background: #FFFFFF;
        border-radius: 200rpx 0rpx 0rpx 200rpx;
        font-size: 24rpx;
        color: #17447E;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
.bannerimg{
    width: 100%;
    height: 450rpx;
}
	.list {
		// background: #262626;
		// padding-bottom: 20rpx;
		display: flex;
		flex-wrap: wrap;
		// margin-top: 8rpx;
		box-sizing: border-box;
		width: 95%;
		margin: 24rpx auto;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		border-radius: 16rpx;
		box-shadow: 0 0 12rpx 0 rgba(0, 0, 0, 0.08);
		padding: 20rpx;
		box-sizing: border-box;
		.userbox {
			display: flex;
			width: 100%;
			.userimg {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
			.middbox {
				margin-left: 24rpx;
				.name {
					font-size: 28rpx;
					color: #333333;
					font-weight: 600;
					margin-left: 10rpx;
				}
				.daybox {
					.Birthday {
						font-size: 24rpx;
						color: #999999;
						// border-right: 1rpx solid #999999;
						padding: 0 10rpx;
						margin-right: 10rpx;
					}
					.city {
						font-size: 24rpx;
						color: #999999;
					}
				}
			}
			.time {
				// margin-left: 268rpx;
				flex: 1;
				text-align: right;
				font-size: 24rpx;
				color: #999999;
			}
		}
		&::after {
			content: '';
			display: block;
			height: 1px;
			width: 325rpx;
		}

		.message {
			width: 100%;
			height: 80rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.name-avatar {
				height: 80rpx;
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;

				.avatar {
					width: 80rpx;
					height: 80rpx;
					border-radius: 10rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
				}

				.name {
					margin-left: 10rpx;
					font-size: 15px;
					font-weight: 600;
				}
			}

			.time {
				width: 200rpx;
				height: 100rpx;
				line-height: 100rpx;
				font-size: 15px;
				text-align: right;
			}
		}

		.content {
			margin-top: 10rpx;
			margin-bottom: 10rpx;
			font-size: 28rpx;
			color: #333333;
			width: 100%;
			// white-space: nowrap;
			// overflow: hidden;
			// text-overflow: ellipsis;
		}

		.imglist {
			box-sizing: border-box;
			width: 100%;
			margin: 10rpx 0 20rpx 0;
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
			flex-wrap: wrap;

			.img {
				box-sizing: border-box;
				width: 180rpx;
				height: 180rpx;
				margin-top: 20rpx;
				margin-left: 18rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.ft_btn {
			width: 100%;
			margin-bottom: 10rpx;
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			// justify-content: flex-end;
			justify-content: space-between;
			.citybottom {
				font-size: 24rpx;
				color: #999999;
			}
			.buttonbox {
				display: flex;
				align-items: center;
			}
			button {
				height: 44rpx;
				width: 44rpx;
				// margin-left: 16rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					height: 44rpx;
					width: 44rpx;
				}
			}

			.icon_box {
				height: 48rpx;
				width: 48rpx;
				border-radius: 48rpx;
				background: rgba(255, 255, 255, 0.9);
				margin-right: 16rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					height: 32rpx;
					width: 32rpx;
				}
			}

			.time {
				width: 75%;
				height: 100rpx;
				line-height: 100rpx;
				font-size: 15px;
				text-align: left;
			}

			.icon_pad {
				width: 44rpx;
				height: 44rpx;
				padding-left: 14rpx;
				padding-right: 10rpx;
				text-align: left;
			}
			.icon_pad2{
				width: 44rpx;
				height: 44rpx;
				// padding-left: 14rpx;
				padding-right: 10rpx;
				text-align: left;
			}
		}

		.mt20 {
			margin-top: 0rpx;
			width: 100%;

			.one {
				display: flex;
				width: 100%;
				//height: 480rpx;

				image {
					width: 70%;
				}
			}

			.two {
				display: flex;
				justify-content: space-between;
				width: 100%;

				.two-one {
					width: 40%;
					height: 480rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.two-two {
					width: 59.5%;
					height: 480rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.three {
				display: flex;
				justify-content: space-between;
				width: 100%;

				.three-one {
					width: 49.5%;
					height: 480rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.three-two {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					width: 49.5%;
					height: 480rpx;

					image {
						width: 100%;
						height: 49.6%;
					}
				}
			}

			.four {
				display: flex;
				flex-direction: column;

				.four-one {
					display: flex;
					justify-content: space-between;

					.four-one-one {
						width: 40%;
						height: 300rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.four-one-two {
						width: 59.5%;
						height: 300rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}

				.four-two {
					display: flex;
					justify-content: space-between;

					.four-two-one {
						width: 59.5%;
						height: 300rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.four-two-two {
						width: 40%;
						height: 300rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}

			.five {
				display: flex;
				flex-wrap: wrap;
				width: 100%;

				.five-one {
					width: 221rpx;
					height: 250rpx;
					margin-bottom: 8rpx;
					margin-left: 4rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.video_box {
			width: 100%;
			height: 450rpx;

			video {
				width: 50%;
				height: 100%;
			}
		}
	}

	.empty {
		background: #fff;
		min-height: 500rpx;
	}
.x-popup {
	background-color: #ffffff;
	width: 650rpx;
	border-radius: 20rpx;
	padding-bottom: 20rpx;

	.popup-title {
		padding: 20rpx 0 10rpx;
		text-align: center;
		font-size: 32rpx;
		position: relative;
		color: #333;

		.xiaoju-popup-close {
			font-size: 24rpx;
			position: absolute;
			right: 50rpx;
			top: 10rpx;
			color: #333;
		}
	}

	.popup-wrap {
		max-height: 800rpx;
		min-height: 300rpx;
		padding-top: 10rpx;
		padding-bottom: 30rpx;

		.popup-cell {
			padding: 8rpx 40rpx;
			font-size: 30rpx;
			line-height: 44rpx;
		}
	}

	.popup-tip {
		margin: 0 auto;
		width: 100%;
		height: 55rpx;
		color: #4c310c;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 20rpx;
	}

	.popup-btn {
		margin: 0 auto;
		width: 200rpx;
		height: 60rpx;
		border-radius: 10rpx;
		color: #fff;
		font-size: 28rpx;
		letter-spacing: 2px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fd4c61;
	}
}
.x-list {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	padding: 0 60rpx;

	.list-cell {
		width: 27%;
		height: 170rpx;
		border: 2rpx solid #fff;
		display: flex;
		align-items: center;
		flex-direction: column;
		padding: 5rpx 0rpx 10rpx;
		border-radius: 16rpx;
		position: relative;

		&.list-active {
			border-radius: 16rpx;
			border: 2rpx solid #70737c;
		}

		.list-btn {
			width: calc(100% + 4rpx);
			height: 52rpx;
			color: #fff;
			background: #fd4c61;
			border-radius: 0rpx 0rpx 16rpx 16rpx;
			position: absolute;
			bottom: -2rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;

			.count {
				color: #fff;
				line-height: 60rpx !important;
				// margin-right: 5rpx;
			}

			.add {
				display: flex;
				justify-content: center;
				align-items: center;
				/* border: 2rpx solid #ccc; */
				box-sizing: border-box;
				font-size: 52rpx;
				width: 75rpx;
				color: #fff;
			}
		}

		.list-icon {
			width: 80rpx;
			height: 80rpx;
		}

		.list-name {
			color: #333;
			font-size: 26rpx;
			margin-top: 8rpx;
		}

		.list-price {
			color: #333;
			font-size: 22rpx;
			margin-top: 5rpx;
		}
	}
}
.Commbox{
	text{
		color: #5f698b;
	}
}
.x-share {
		background-color: #ffffff;
		width: 750rpx;
		border-radius: 20rpx;
		padding: 40rpx 20rpx 80rpx;
		display: flex;
		box-sizing: border-box;

		.item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			background-color: #ffffff;

			image {
				width: 64rpx;
				height: 64rpx;
				margin-bottom: 10rpx;
			}

			span {
				color: #2e2e2e;
			}
		}

	}
</style>